<template>
	<view class="content">
		<view class="top"></view>
		<view class="center_box">
			<view class="title">手机号快捷登录</view>
			<form class="form">
				<view class="form_item">
					<view class="titleLeft">+86</view>
					<input placeholder="请输入手机号" placeholder-style="font-size:35rpx;color:#ADADAD"
						v-model="phone"></input>
				</view>
				<view class="form_item">

					<input placeholder="请输入验证码" placeholder-style="font-size:35rpx;color:#ADADAD" v-model="sms"></input>
					<view class="get_code" v-if="!waite" @click="sendMa()">{{text}}</view>
					<view class="get_code" v-if="waite" style="font-size: 40rpx;padding-right: 20rpx;">{{countDown}}s
					</view>
				</view>
			</form>
			<button @click="login()">登录</button>
			<!-- 			<view>
				<view  class="another_login_nav">
					<view class="another_login_nav_item" v-for="(item,index) in loginNav" :key="index" >
						{{item}}
					</view>
				</view>
			</view> -->
		</view>
		<!-- 		<view class="foot">
			<view class="title">第三方登录</view>
			<view class="cuIcon-weixin icon" >
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				sms: '',
				loginNav: ['密码登录', '注册'],
				waite: false,
				text: '发送验证码',
				countDown: 60
			}
		},
		onLoad() {
			uni.hideHomeButton()
		},
		onShow() {

		},
		methods: {
			login() {
				let that = this;
				if (this.phone === '') {
					return uni.showToast({
						title: '请输入手机号码',
						duration: 2000,
						icon: 'error'
					});
				}

				if (this.sms === '') {
					return uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						icon: 'error'
					});
				}
				console.log('执行');

				//获取用户ip
				wx.request({
					url: 'http://ip-api.com/json',
					success: function(e) {
						console.log('用户ip', e.data.query)
					}
				});

				let body = {
					account: "string",
					code: "string",
					phoneCode: "string",
					phone: "string"
				}
				wx.login({
					success: async (res) => {
						console.log('登录结果', res.code)
						if (res.code) {

							body.account = '鸽子孵化周期管理';
							body.code = res.code;
							body.phoneCode = that.sms;
							body.phone = that.phone;
							console.log('参数', body)

							wx.cloud.callContainer({
								config: {
									env: "prod-9gaetadn0414eb27"
								},
								path: "/authority/user/wechat/bind",
								header: {
									"X-WX-SERVICE": "springboot-authority",
									"content-type": "application/json",
									xip: getApp().globalData.xip
								},
								method: "POST",
								data: body,
								success(res) {
									console.log(res, '登录结果')
									getApp().globalData.isLogin = true;
									if (res.data.statusCode === 20000) {
										let token = res.header.token;
										uni.setStorageSync('token', token);
										getApp().globalData.isLogin = true;
										uni.switchTab({
											url: '../index/index'
										})
									}
									// if ()
								},
								fail(error) {
									console.log('失败', error)
								}
							})

						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})

			},
			sendMa() {
				if (this.phone === '') {
					return uni.showToast({
						title: '请输入手机号码',
						duration: 2000,
						icon: 'error'
					});
				}
				wx.cloud.callContainer({
					config: {
						env: "prod-9gaetadn0414eb27"
					},
					path: "/sms/sendSms/sendCaptcha/" + this.phone,
					header: {
						"X-WX-SERVICE": "springboot-gateway",
						"content-type": "application/json",
						xip: getApp().globalData.xip
					},
					method: "POST",
					data: "",
					success(res) {
						console.log(res, '发送短信结果')
						if (res.data.statusCode === 20001) {
							uni.showToast({
								title: '请稍后重试',
								duration: 2000,
								icon: 'error'
							});
						} else {
							uni.showToast({
								title: '验证码已发送',
								duration: 2000,
								icon: 'success'
							});
						}
					},
					fail(error) {
						console.log('失败', error)
					}
				})

				this.waite = true
				var time = setInterval(() => {
					this.countDown--;
					if (this.countDown === 0) {
						this.waite = false;
						this.countDown = 60;
						clearInterval(time)
						this.text = '重新发送'
						console.log('执行')
					}

				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: relative;

		.top {
			height: 400rpx;
			background-color: #23b8ff;
		}

		.center_box {
			position: absolute;
			top: 200rpx;
			left: 50%;
			margin-left: -300rpx;
			padding: 20rpx;
			// margin: 150rpx 40rpx 30rpx 40rpx;
			// background-color: pink;
			// width: 600rpx;
			height: 600rpx;
			width: 600rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 1rpx 1rpx 10rpx #E5E5E5;

			.title {
				text-align: center;
				margin-bottom: 60rpx;
				font-size: 40rpx;
				font-weight: 700;
				letter-spacing: 2rpx;
			}

			.form {
				color: #ADADAD;
				font-weight: 500;

				.form_item {
					display: flex;
					margin-bottom: 50rpx;
					letter-spacing: 2rpx;
					font-size: 38rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 2rpx solid #b1babf;

					// text-align: center;
					.titleLeft {
						flex: 1;
						margin-right: 10rpx;
						height: 100%;
						// text-align: center;
					}

					input {
						flex: 6;
						height: 100%;
					}

					.get_code {
						height: 70rpx;
						line-height: 55rpx;
						padding: 10rpx;
						font-size: 35rpx;
					}
				}
			}

			button {
				margin-top: 80rpx;
				border-radius: 100rpx;
				height: 85rpx;
				line-height: 85rpx;
				background-color: #23b8ff;
				color: #FFFFFF;
			}

			.another_login_nav {
				display: flex;
				justify-content: center;
				align-items: center;

				.another_login_nav_item {
					font-size: 30rpx;
					margin-right: 40rpx;
					margin-top: 20rpx;
				}
			}

			.loginNav {
				font-size: 80rpx;
			}

		}

		.foot {
			margin: 20rpx 40rpx 30rpx 40rpx;

			.title {
				text-align: center;
				font-size: 32rpx;
			}

			.icon {
				width: 100rpx;
				height: 100rpx;
				margin: 0 auto;
				margin-top: 40rpx;
				background-color: #DBDBDB;
				font-size: 80rpx;
				border-radius: 50rpx;
				text-align: center;
				color: #ABABAB;
			}
		}
	}
</style>
